<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/index2.css" />
		<link rel="stylesheet" type="text/css" href="demo.css">
		<style type="text/css">
			.toppg {
				width: 10%;
				height: 100%;
				padding-top: 4%;
				text-align: center;
				color: white;
				font-size: 37px;
				margin-left: 40px;
				float: left;
				font-family: 隶书;
				cursor: pointer;
			}
			
			.dhl ul li a {
				color: white;
				font-size: 35px;
				font-family: 楷体;
				text-decoration: none;
				line-height: 25px;
			}
			
			.topindex {
				width: 100%;
				height: 8%;
				font-family: 隶书;
				font-size: 27px;
				color: #50e7ff;
				line-height: 40px;
				text-align: center;
				background: url(../img/linkbg.jpg) center center repeat-x;
			}
			
			.container {
				margin: 0 auto;
				position: relative;
				overflow: hidden;
			}
			
			#footer {
				width: 100%;
				position: absolute;
				top: 1625px;
				color: black;
				background-color: #666;
				border-top: 1px solid #ccc;
				padding: 40px;
				text-align: center;
				color: #eee;
			}
			
			.pp1 {
				font-size: 23px;
				/*color: #50e7ff;*/
				color: darkgray;
				line-height: 25px;
			}
			
			.pp4 {
				color: #50e7ff;
				font-size: 25px;
				line-height: 100px;
				font-weight: bold;
			}
		</style>

	</head>

	<body style="background-image: url(img/demo-1-bg.jpg);">
		<!--导航条开始-->
		<div class="container demo-1" style="height: 1748px;">
			<div id="large-header">
				<canvas id="demo-canvas" style="width: 100%;height: 27%;margin-top:100px;"></canvas>
				<div class="top">
					<div class="toplogo"><img src="img/zj.jpg"></div>
					<div class="toppg">湛江景色</div>
					<div class="dhl">
						<ul>
							<li>
								<a href="index.html">首页</a>
							</li>
							<li>
								<a href="new1.html">介绍</a>
							</li>
							<li>
								<a href="new2.html">特色</a>
							</li>
							<li>
								<a href="adout.html">关于</a>
							</li>
						</ul>
					</div>
				</div>
				<!--导航条结束-->

				<!--顶部开始-->
				<div class="cotton">
					<div class="topindex">风 景 首 页</div>
					<div class="cottom">

						<div class="dhltop">
							<input type="text" placeholder="搜索" class="shous" />
							<input type="submit" value="点击搜索" style="font: 25px;font-family: 隶书;height: 36px;" class="shous2" />
						</div>

						<!--轮播图开始-->
						<div class="js-silder">
							<div class="silder-scroll">

								<div class="silder-main" style="height: 384px;">
									<div class="silder-main-img" style="left: 0px;">
										<img src="img/lp3.jpg" alt="" class="imgs" width="100%" height="100%">
									</div>
									<div class="silder-main-img" style="left: -982px;">
										<img src="img/lp5.jpg" alt="" class="imgs" width="100%" height="100%">
									</div>
									<div class="silder-main-img" style="left: -982px;">
										<img src="img/lp4.jpg" alt="" class="imgs" width="100%" height="100%">
									</div>
									<div class="silder-main-img" style="left: -982px;">
										<img src="img/lp1.jpg" alt="" class="imgs" width="100%" height="100%">
									</div>
									<div class="silder-main-img" style="left: -982px;">
										<img src="img/lp7.jpg"" class="imgs" width="100%" height="100%">
									</div>
									<div class="silder-main-img" style="left: -982px;">
										<img src="img/lp13.jpg" class="imgs" width="100%" height="100%">
									</div>
								</div>
							</div>
							<div class="js-silder-ctrl">
								<span class="silder-ctrl-prev"><span>&lt;</span></span>
								<span class="silder-ctrl-next"><span>&gt;</span></span>
							</div>
						</div>
						<!--轮播图结束-->

					</div>

					<!--轮播图右部分-->
					<div class="rightbox">
						<div class="rightbox1">
							<div class="vadio">
								<img src="img/video1.jpg" class="yipian" />

							</div>
							<p class="text11">青春最美的日子</p>

							<div class="vadio"><img src="img/video2.jpg" class="yipian" />

							</div>
							<p class="text11">校园风暴史</p>

							<div class="vadio"><img src="img/video3.jpg" class="yipian" />

							</div>
							<p class="text11">最遥远的距离</p>

							<div class="vadio">
								<img src="img/new13.jpg" class="yipian" />

							</div>
							<p class="text11">最美的风景</p>

						</div>
					</div>
				</div>
				<!--顶部结束-->

				<!--中部开始-->
				<div id="wrap">
					<ul>
						<li>
							<a href="" class="a1">
								<img src="img/time1.jpg">
								<div class="divA">
									<p class="pp1">海滨公园</p>
									<p class="p2"></p>
									<p class="p3">¥<span>门票免费</span></p>
								</div>
							</a>
							<a href="" class="a2">
								<p class="pp4">海滨公园</p>
								<p class="p5">湛江海滨公园是一个充满亚热带海洋风光的公园，公园与植物景观和生态造景为主。</p>
								<p class="p6"><span></span></p>
								<p class="p7">查看详情</p>
							</a>
						</li>

						<li>
							<a href="" class="a1">
								<img src="img/time3.jpg">
								<div class="divA">
									<p class="pp1">海湾大桥</p>
									<p class="p2"></p>
									<p class="p3">¥<span>门票免费</span>起</p>
								</div>
							</a>
							<a href="" class="a2">
								<p class="pp4">海湾大桥</p>
								<p class="p5">海湾大桥的夜空澄澈明净，月亮升高了，又圆又亮的悬挂在海湾大桥上方的天际，月的清辉铺在海面上，泛着粼粼的波光，似有一把神奇的大手，将碎银洒向湖面。</p>
								<p class="p6"><span></span></p>
								<p class="p7">查看详情</p>
							</a>
						</li>

						<li>
							<a href="" class="a1">
								<img src="img/time4.jpg">
								<div class="divA">
									<p class="pp1">金沙湾</p>
									<p class="p2"></p>
									<p class="p3">¥<span>门票免费</span></p>
								</div>
							</a>
							<a href="" class="a2">
								<p class="pp4">金沙湾</p>
								<p class="p5">金沙湾海滨浴场是一个公共沙滩，虽说是海湾，像一个湖一样风平浪静的，沙滩很平缓，可以游出很远，位于市中心，交通很方便，周边设施完善。沙滩旁的椰子林还有体育明星的签名、手印，很有特色。旁边有几个大型商城还有国贸大厦，沙滩椅、遮阳伞都是免费的。</p>
								<p class="p6"><span></span></p>
								<p class="p7">查看详情</p>
							</a>
						</li>

						<li>
							<a href="" class="a1">
								<img src="img/time2.jpg">
								<div class="divA">
									<p class="pp1">湖光公园</p>
									<p class="p2"></p>
									<p class="p3">¥<span>门票免费</span>起</p>
								</div>
							</a>
							<a href="" class="a2">
								<p class="pp4">湖光公园</p>
								<p class="p5">湖光岩世界地质公园位于广东省湛江市区西南部18公里处，总面积为38平方公里，园区是一个以玛珥火山地质地貌为主体， 兼有海岸地貌、构造地质地貌等多种地质遗迹，自然生态良好，人文景观丰富的公园。</p>
								<p class="p6"><span></span></p>
								<p class="p7">查看详情</p>
							</a>
						</li>

						<li>
							<a href="" class="a1">
								<img src="img/ps22.jpg">
								<div class="divA">
									<p class="pp1">开发区</p>
									<p class="p2">。。。</p>
									<p class="p3">¥<span>门票免费</span></p>
								</div>
							</a>
							<a href="" class="a2">
								<p class="pp4">开发区</p>
								<p class="p5">湛江经济技术开发区(简称湛江开发区)是1984年11月29日经国务院批准成立的全国首批14个沿海经济技术开发区之一，于1985年4月2日奠基，位于湛江市赤坎区和霞山区两个老城区之间。</p>
								<p class="p6"><span></span></p>
								<p class="p7">查看详情</p>
							</a>
						</li>

						<li>
							<a href="" class="a1">
								<img src="img/ps7.jpg">
								<div class="divA">
									<p class="pp1">寸金公园</p>
									<p class="p2"></p>
									<p class="p3">¥<span>门票免费</span></p>
								</div>
							</a>
							<a href="" class="a2">
								<p class="pp4">寸金公园</p>
								<p class="p5">寸金桥公园，位于广东省湛江市赤坎区西侧，因邻近寸金桥而得名。该公园始建于1958年，旧称"西山公园"、"人民公园"，又称寸金公园，为纪念遂溪人民抗法斗争改为现名，是湛江八景之一"寸金浩气"。</p>
								<p class="p6"><span></span></p>
								<p class="p7">查看详情</p>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--中部结束-->

		<!--底部-->
		<footer id="footer">
			<div class="container">
				<p>版权归湛江人民所有</p>
				<p>如有事联系:13018596132</p>
			</div>
		</footer>

	</body>
	<script src="js/TweenLite.min.js"></script>
	<script src="js/EasePack.min.js"></script>
	<script src="js/rAF.js"></script>
	<script src="js/demo-1.js"></script>
	<script src="js/jquery-1.11.3.min.js"></script>
	<script src="js/wySilder.min.js"></script>

	<!--轮播图js部分-->
	<script>
		$(function() {
			$(".js-silder").silder({
				auto: true, //自动播放，传入任何可以转化为true的值都会自动轮播
				speed: 20, //轮播图运动速度
				sideCtrl: true, //是否需要侧边控制按钮
				bottomCtrl: true, //是否需要底部控制按钮
				defaultView: 0, //默认显示的索引
				interval: 500, //自动轮播的时间，以毫秒为单位，默认3000毫秒
				activeClass: "active", //小的控制按钮激活的样式，不包括作用两边，默认active
			});
		});
	</script>

	<!--中部js部分-->
	<script type="text/javascript">
		$('li').mouseenter(function() {
			$(this).find('.divA').stop().animate({
				bottom: '-66px'
			});
			$(this).find('.a2').css({
				left: '0'
			})
			$(this).children('.a2').find('.p4').css({
				left: '0'
			})
			$(this).children('.a2').find('.p5').css({
				left: '0'
			})
			$(this).children('.a2').find('.p6').css({
				transform: 'scale(1)'
			})
			$(this).children('.a2').find('.p7').css({
				bottom: '25px'
			})
		})
		$('li').mouseleave(function() {
			$(this).find('.divA').stop().animate({
				bottom: '0px'
			});
			$(this).find('.a2').css({
				left: -$(this).width()
			})
			$(this).children('.a2').find('.p4').css({
				left: -$(this).width()
			})
			$(this).children('.a2').find('.p5').css({
				left: -$(this).width()
			})
			$(this).children('.a2').find('.p6').css({
				transform: 'scale(1.3)'
			})
			$(this).children('.a2').find('.p7').css({
				bottom: '-50px'
			})
		})
	</script>

</html>